<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单数据测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .menu-item { border: 1px solid #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; }
        .loading { color: #666; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h1>菜单数据测试页面</h1>
    <div id="status">正在加载菜单数据...</div>
    <div id="menu-container"></div>

    <script>
        async function testMenuAPI() {
            const statusDiv = document.getElementById('status');
            const containerDiv = document.getElementById('menu-container');
            
            try {
                statusDiv.innerHTML = '<span class="loading">正在获取菜单数据...</span>';
                
                const response = await fetch('/api/menu/public/items');
                const data = await response.json();
                
                console.log('API响应:', data);
                
                if (data.success && data.data && data.data.items) {
                    statusDiv.innerHTML = `<span class="success">成功获取 ${data.data.items.length} 个菜单项</span>`;
                    
                    containerDiv.innerHTML = data.data.items.map(item => `
                        <div class="menu-item">
                            <h3>${item.name || '未知名称'}</h3>
                            <p><strong>英文名:</strong> ${item.name_en || '无'}</p>
                            <p><strong>价格:</strong> ¥${item.price || 0}</p>
                            <p><strong>分类:</strong> ${item.category || '未分类'}</p>
                            <p><strong>描述:</strong> ${item.description || '无描述'}</p>
                            <p><strong>状态:</strong> ${item.status || '未知'}</p>
                            <p><strong>库存:</strong> ${item.stock || 0}</p>
                            ${item.image ? `<p><strong>图片:</strong> <img src="${item.image}" alt="${item.name}" style="max-width: 100px; height: auto;"></p>` : ''}
                        </div>
                    `).join('');
                } else {
                    statusDiv.innerHTML = '<span class="error">API响应格式异常</span>';
                    containerDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            } catch (error) {
                console.error('获取菜单数据失败:', error);
                statusDiv.innerHTML = `<span class="error">获取菜单数据失败: ${error.message}</span>`;
            }
        }
        
        // 页面加载后立即测试
        testMenuAPI();
    </script>
</body>
</html>